<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>嵌套路由</h3>
        <nav>
                <router-link to="/">主页</router-link>
                <router-link to="/news">新闻</router-link>
                <router-link to="/sports">体育</router-link>
        </nav>

        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>

    <script>

        // 嵌套路由
        //   目标： 对组件的功能再做细分
        // 特点：
        //   router-view 再次包含 router-view

        // 步骤
        //   在要拆分的组件上，配置 children项
        //   {path: '',
        //   component: { template:"<router-view></router-view>" }
        //   children: [
        //     path:,component:{}
        //   ]}

        // 注意点：
        //  1.在children中的path加，不加 /的区别。
        //     如果path加/,表示访问的路径是 index.html#/guonei
        //     如果path不加/,表示访问的路径是 index.html#/sports/guonei

        // 2.默认显示的组件 。进入二级路由时，默认要显示的组件
        //   把它的path设为 ""


        const router = new VueRouter({
            routes: [
                {path:'/',component:{template:`<div>主页</div>`}},
                {path:'/news',component:{template:`<div>我是新闻</div>`}},
                {
                    path:'/sports',
                    component:{
                        template:`<div>
                            <h4>体育-改变人生</h4>
                            <router-link to="/sports">体育的主页</router-link>
                            <router-link to="/sports/guonei">国内的体育</router-link>
                            <router-link to="/guowai">国外的体育</router-link>
                            <!--二级路由的容器-->
                            <router-view></router-view>
                        </div>`
                    },
                    // 二级路由的组件
                    children: [
                        {
                            // path: 'index', // 体育下的二级页面的主页
                            // path为空，则表示进入到这个二级路由时，默认要显示的组件
                            path: '', // 体育下的二级页面的主页
                            component: {template:`<div>体育的主页</div>`}
                        },
                        {
                            // 如果path：加/,表示访问的路径是 index.html#/guonei
                            // 如果path：不加/,表示访问的路径是 index.html#/sports/guonei
                            path: 'guonei', // 体育下的二级页面的主页
                            component: {template:`<div>国内的体育</div>`}
                        }
                        ,
                        {
                            // 如果path：加/,表示访问的路径是 index.html#/guowai
                            path: '/guowai', // 体育下的二级页面的主页
                            component: {template:`<div>国外的体育</div>`}
                        }
              
                    ]
                }
            ]
        })

        const vm = new Vue( {
            el: '#app',
            // router: router
            router
        })
    </script>
</body>
</html>